<template>
	<div>
    <div class="lists-top">
      <div class="prize-list-search">
        <div class="search-wrap">
          <search ref="search" :searchInfo="searchInfo" @search="searchFn"></search>
        </div>
        <div class="select-box" :class="activeGameType>0 && activeType>0?'active':''" @click="handleShowSelect">
          <i></i>
          <span>{{activeGameType>0 && activeType>0?'已筛选':'未筛选'}}</span>
        </div>
      </div>
      <lists-nav :navData="navData" @changeOrderType="changeOrderType"></lists-nav>
    </div>
    <div class="lists-wrapper">
      <!-- 全部订单 -->
      <!-- 待发货 -->
      <!-- 待收货 -->
      <!-- 已收货 -->
      <lists-all ref="listAll" @getAllGame="getAllGame"></lists-all>
    </div>

    <van-popup v-model="showSelectPop" position="right" class="game-select-pop" :close-on-click-overlay="false" :style="{ height: '100%' }">
      <div class="game-select-wrap">
        <div class="game-type-wrap">
          <div class="title">按游戏类别</div>
          <div class="game-type-con">
            <van-button round v-for="(item,index) in all_game" :key="index" class="game-type" :class="(activeGameType == item.game_type && activeType == item.type)?'active':''" @click="handerGameType(item)">{{item.game_name}}</van-button>
          </div>
        </div>
        <div class="select-btn">
          <van-button round class="btn reset" @click="handleReset">重置</van-button>
          <van-button round class="btn confirm" @click="handleConfirm">确定</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import Vue from 'vue'
  import search from '@/components/Search/index'
  import listsNav from './components/listsNav/index'
  import listsAll from './components/listsAll/index'
  export default Vue.extend({
    name: 'index',
    components: {
      search,
      listsNav,
      listsAll
    },
    data() {
      return {
        searchInfo: {
          placeholder: '订单编号/商品名称'
        },
        query: '',
        curType: '',
        navData: {
          curType: ''
        },
        all_game: [],
        activeGameType: '', // all_game中的game_type
        activeType: '', // all_game中的type
        showSelectPop: false // 是否显示筛选游戏弹窗
      }
    },
    methods: {
      getOrderType() {
        this.query = this.$route.query
        if (this.query.type) {
          this.curType = this.query.type
          this.navData.curType = this.curType
        }
      },
      // 获取关键词
      getKeyword() {
        const keyword = this.$refs.search.keyword
        return keyword
      },
      // 切换订单类型
      changeOrderType(type) {
        this.curType = type
        this.$Bus.$emit('statusEvent', { status: type, keyword: this.getKeyword() })
      },
      // 点击搜索
      searchFn(keyword) {
        this.$Bus.$emit('prizeListSearch', { keyword: keyword })
      },
      // 点击筛选
      handleShowSelect() {
        this.showSelectPop = true
      },

      // 获取所有游戏名称
      getAllGame(option) {
        this.all_game = option
      },
      // 选择游戏
      handerGameType(item) {
        this.activeGameType = item.game_type
        this.activeType = item.type
      },
      // 重置游戏筛选
      handleReset() {
        this.activeGameType = ''
        this.activeType = ''
        this.$Bus.$emit('gameTypeSelect', {
          game_type: this.activeGameType,
          type: this.activeType,
          keyword: this.getKeyword()
        })
        this.showSelectPop = false
      },
      // 确定游戏筛选
      handleConfirm() {
        this.$Bus.$emit('gameTypeSelect', {
          game_type: this.activeGameType,
          type: this.activeType,
          keyword: this.getKeyword()
        })
        this.showSelectPop = false
      }
    },
    created() {
      this.getOrderType()
    },
    mounted() {
      // TODO 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.$refs.listAll.onLoad()
      })
    },
    /* watch: {
      curType(val) {
        this.navData.curType = val
      }
    } */
  })
</script>

<style lang="scss">
.lists-top{
  position:fixed;
  top:0;
  left:0;
  right: 0;
  margin: 0 auto;
  max-width: 750px;
  z-index:3;
  width:100%;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  .prize-list-search{
    display:flex;
    align-items: center;
    background:#fff;
    .search-wrap{
      width:600px;
    }
    .select-box{
      height:72px;
      margin-left:8px;
      display:flex;
      align-items:center;
      font-weight:bold;
      color:#999;
      i{
        margin-right:2px;
        width:28px;
        height:28px;
        background:url("https://img.wifenxiao.com/h5-wfx/images/public/select.png") center/100% 100% no-repeat;
        // background-size:;
      }
      &.active{
        color:#F30C23;
        i{
          background-image:url("https://img.wifenxiao.com/h5-wfx/images/public/selected.png");
        }
      }
    }
  }
}
.lists-wrapper{
  padding-top:208px;
}
.game-select-pop{
  width:490px;
  padding:0 40px;
  .game-type-wrap{
    .title{
      padding:28px 0;
      line-height: 32px;
      font-weight: bold;
    }
    .game-type-con{
      padding-bottom:12px;
      border-bottom:2px solid #E9E9E9;
      .game-type{
        height:48px;
        margin:0 28px 28px 0;
        padding:0 20px;
        font-size:20px;
        border-color:#F7F7F7;
        color:#999;
        background: #F7F7F7;
        &.active{
          border-color: #F30C23;
          color:#F30C23;
          background:transparent;
        }
      }
    }
  }
  .select-btn{
    margin-top:40px;
    .btn{
      height:64px;
      margin-right:28px;
      padding:0 40px;
      font-size:28px;
      &.confirm{
        border:0;
        color:#fff;
        background:#F30C23;
      }
    }
  }

}
</style>